<template>
  <ul class="infinite-list"  style="overflow:auto">
    <li v-for="item in this.note" v-on:click="getnote($event,item,item.noteId)" class="infinite-list-item">
      <div class="content">
        <h5 id="title" v-model="noteinfo.title">{{item.noteTitle}}</h5>
        <ul class="tool-bar">
          <li class="iconfont icon-xing" @click="cancelStar(item.starId)" style="color: #ffcb33;"></li>
          <li class="iconfontnew icon-fenxiang"></li>
          <li class="iconfont icon-huishouzhan" @click="notedelete(item.noteId)"></li>
        </ul>
        <p class="above">{{item.noteContent}}</p>
        <span id="date" v-model="noteinfo.date">{{item.createTime}}</span>
      </div>
    </li>
  </ul>
</template>

<script>
    import bus from '../../../assets/bus'
    export default {
        name: "xing",
        data(){
            return{
                editor: {
                    info: "",
                },
                note:[],
                noteinfo:{
                    title:"",
                    detail:"",
                    date:"",
                    noteId:Number,
                    star:0
                },
            }
        },
        methods:{
            getnote(e,item,noteId){
                var _this=this;
                var noteinfo=_this.noteinfo;
                _this.$axios.get('/note/query',{
                    params:{noteId:noteId}
                }).then(function (res) {
                    _this.noteinfo.detail=res.data.data.data;//将笔记内容放入noteinfo
                    _this.noteinfo.title=item.noteTitle;//获取标题dom中的内容
                    _this.noteinfo.date=item.createTime;//获取日期dom中的内容
                    _this.noteinfo.noteId=item.noteId;
                    _this.$emit("getnote",noteinfo)//将noteinfo传至cloudnote
                    console.log(res);
                }).catch(function (err) {
                    console.log(err);
                })
                //这里进行了一次dom排他操作，但是当数据量过大时并不适用
                var list=e.currentTarget.parentElement.children//获取列表元素放入一个集合
                for(var i=0;i<list.length;i++){
                    list[i].style.background="#FFFFFF";//遍历每个元素将其背景元素设为白色
                }
                e.currentTarget.style.background="#eaf0fb";//将目前选中的元素背景设为选中色
            },
            getnotelist(){
                var _this=this;
                this.$axios.get('/star/queryStar',{
                }).then(function (res) {
                    var list=res.data.data.data;
                    for(var i=0;i<list.length;i++){
                        if(list[i]==null){
                            list.splice(i,1);
                            i--;
                        }else{
                            list[i].createTime = _this.timestampToTime(list[i].createTime);//时间戳转换
                            list[i].noteContent=_this.removeTag(list[i].noteContent);//去除html
                        }
                    }
                    console.log(list);
                    _this.note=list;
                    }
                ).catch(function (err) {
                    console.log(err);
                });
            },
            timestampToTime(timestamp) {
                var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate()<10?'0'+(date.getDate()):date.getDate());
                return Y + M + D;
            },
            cancelStar(starId){
                var _this=this;
                this.$axios.delete('/star/cancelStar',{
                    data:{starId:starId}
                }).then(function (res) {
                    console.log(res);
                    _this.getnotelist()
                }).catch(function (err) {
                    console.log(err);
                })
            },
            notedelete(noteId){
                var _this=this;
                this.$axios.delete('/note/delete',{
                    data:{
                        noteId:noteId
                    }
                }).then(function (res) {
                    console.log(res);
                    if (res.data.code==200){
                        _this.getnotelist();
                    }
                }).catch(function (err) {
                    console.log(err);
                })
            },
            removeTag(str,len){
                return str.replace(/<\/?.+?>/g,"");
            }
        },
        mounted() {
            var _this=this;
            //接收从wangeditor组件传输来的组件
            bus.$on('getinfo',(e)=>{
                this.editor.info=e;
                console.log(e);
            });
            this.getnotelist();
        }
    }
</script>

<style scoped>
  .infinite-list{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: block;
  }
  .infinite-list-item{
    display: inline-block;
    height: 125px;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .infinite-list-item h5{
    float: left;
    display: inline-block;
    width: 60%;
    font-size: 15px;
    height: 23px;
    text-align: left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis !important;
  }

  .infinite-list-item p {
    overflow:hidden;
    /*超出范围用省略号表示*/
    text-overflow:ellipsis !important;
    font-size: 14px;
    line-height: 25px;
    width: 100%;
    height: 50px;
    text-align: left;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*显示行数为2*/
    -webkit-line-clamp:2 !important;
    /*自动换行*/
    word-wrap: break-word;
    word-break: break-all;
  }

  .infinite-list-item .content #date{
    height: 15px;
    float: left;
    width: 50%;
    margin-top: 15px;
    display: inline-block;
    color: rgb(194,194,194);
    text-align: left;
  }
  .infinite-list-item .content{
    height: 100%;
    width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
  }
  .infinite-list li :hover{
    background: #eaf0fb !important;
  }

  .infinite-list li :hover .tool-bar{
    display: inline-block;
    cursor: pointer;
  }
  .tool-bar{
    /*width: 50px;*/
    /*height: 15px;*/
    /*display: none;*/
    float: right;
    display: none;
  }
  .tool-bar li{
    float: left;
    margin-right: 10px;
    font-size: 20px;
    position: relative;
  }
</style>
